<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- <script src="https://cdn.bootcss.com/vue/2.6.9/vue.min.js"></script> -->
    <!-- <script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script> --> 

    <!-- <link href="https://cdn.bootcss.com/element-ui/2.12.0/theme-chalk/index.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/element-ui/2.12.0/index.js"></script> -->
 <!-- <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script> -->

    <!-- <script src="https://cdn.bootcss.com/zTree.v3/3.5.40/js/jquery.ztree.core.min.js"></script>  -->
     <!-- <script src="https://cdn.bootcss.com/zTree.v3/3.5.40/js/jquery.ztree.excheck.min.js"></script> -->
    <link href="https://cdn.bootcss.com/zTree.v3/3.5.39/css/zTreeStyle/zTreeStyle.css" rel="stylesheet">
   
    <!-- <link rel="stylesheet" href="zTree/css/demo.css" type="text/css"></link> -->
    <link rel="stylesheet" href="zTree/css/zTreeStyle/zTreeStyle.css" type="text/css"></link>
    <script type="text/javascript" src="zTree/js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="zTree/js/jquery.ztree.core.js"></script>

</head>

<body>

    <!-- <el-tree :data="data" id="left" :props="defaultProps" @node-click="handleNodeClick"></el-tree> -->
    <!-- <nav class="sidebar-main">
        <ul class="nav nav-drawer">
          <li class="nav-item nav-item-has-subnav">
            <a href="javascript:void(0)"><i class="mdi mdi-palette" ></i> UI 元素</a>
            <ul class="nav nav-subnav" id="left">
             
            </ul>
          </li>
        </ul>
      </nav> -->

    <!-- <div class="left"> -->
        <ul class="ztree" id="left"></ul>
    <!-- </div> -->

</body>
<script>
var setting = {

callback: {
    beforeClick: function(treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("tree");
        if (treeNode.isParent) {
            zTree.expandNode(treeNode);
            return false;
        } else {
            demoIframe.attr("src",treeNode.file + ".html");
            return true;
        }
    }
}
};

var setting = {
view: {
    dblClickExpand: false,
    showLine: true,
    selectedMulti: false
},
data: {
    simpleData: {
        enable:true,
        idKey: "id",
        pIdKey: "pId",
        rootPId: ""
    }
},
};
$(function(){
$.get(
    "http://localhost:8090/treeMenu/1",
    function(obj){
        alert(JSON.stringify(obj))
        $.fn.zTree.init($("#left") , setting , obj);
    },
    "json"
);
});
</script>
</html>